<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <div th:include="common/head_info::head_infor"></div>
    <script type="text/javascript" th:src="@{../js/roleManege.js}"></script>
</head>
<body>
<div class="container center" style="margin-top: 20px;">
    <div class="panel panel-default ">
        <!-- Default panel contents -->
        <div class="panel-heading">角色管理</div>

        <!-- Table -->
        <table class="table">
            <thead>
            <tr>
                <th>角色id</th>
                <th>角色名</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="roleList">
            </tbody>
        </table>
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>授权</th>
                                <th>url</th>
                                <th>名称</th>
                            </tr>
                            </thead>
                            <tbody id="permission">

                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="updataDate()">修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function updataDate  () {
        var ids = new Array();
        $("input:checkbox:checked").each(function () {
            ids.push($(this).val());
        });
        $.ajax({
            url:"/role/updataMenu",
            type:"POST",
            dataType:"json",
            data:{ids:ids,id:recipient},
            success:function (json) {
                alert("提交成功");
                $("#exampleModal").modal("hide");
            },error:function () {
                alert("提交失败，必须存在一条权限")
                $("#exampleModal").modal("hide");
            }
        })
    }
    var recipient="";
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // 触发事件的按钮
        recipient = button.data('whatever') // 解析出data-whatever内容
        var ids=new Array();
        var modal = $(this);
        $.ajax({
            url:"/role/findMenuAlready",
            type: "POST",
            dataType: "json",
            data:{id:recipient},
            success:function (json) {
                var str = "";
                for (var i = 0; i < json.data.length; i++) {
                    var checked ="";
                    if (json.data[i].roleId!=null){
                        checked = "checked='checked'";
                    }
                    str += "<tr class='success'>" +
                        " <td><input type='checkbox' "+checked+"id='"+json.data[i].menuId+"'value='"+json.data[i].menuId+"'></td>"+
                        " <td>"+json.data[i].menuUrl+"</td>" +
                        " <td>"+json.data[i].menuName+"</td></tr>";
                    ids[i] = json.data[i].menuId;
                }
                $('#permission').html(str);
            }
        })

        modal.find('.modal-title').text('菜单选择')
        // modal.find('[type="checkbox"]').attr("checked","checked");
    });

    $(document).ready(function () {
        $.ajax({
            url: "/role/findAll",
            type: "POST",
            dataType: "json",
            success: function (json) {
                var data = json.data;
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    str += '<tr>' +
                        "<td >" + validate(data[i].roleId) + "</td>" +
                        "<td>" + validate(data[i].roleName) + "</td>" +
                        "<td>" + validate(data[i].description) + "</td>" +
                        "<th ><button type='button' class='btn btn-default' data-toggle='modal' data-target='#exampleModal'" +
                        "data-whatever='" + data[i].roleId + "'>授权</button>" +
                        "</th>" +
                        "<td>" + validate(data[i].mobile) + "</td>" +
                        "</tr>";
                }
                $('#roleList').html(str);
            }
        })
    });
    var validate = function (data) {
        if (data == null) {
            return "";
        }
        return data;
    }



</script>
</body>
</html>